{% extends "layouts/base-auth.html" %}
{% load static %}

{% block content %}

    <div class="flex flex-col items-center justify-center px-6 pt-8 mx-auto md:h-screen pt:mt-0 dark:bg-gray-900">
        <a href="/" class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white">
            <img src="https://flowbite-admin-dashboard.vercel.app/images/logo.svg" class="mr-4 h-11" alt="FlowBite Logo">
            <span>Rocket HTMX</span>  
        </a>
        <!-- Card -->
        <div class="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                Register
            </h2>
            <form 
                method="post" 
                class="mt-8 space-y-6"
                hx-post="{% url 'signup' %}"
                hx-target="#main-container"
                hx-swap="innerHTML"
                hx-indicator="#loading-indicator"
                hx-on="htmx:beforeRequest:
                    document.getElementById('loading-indicator').classList.remove('hidden'); 
                    document.getElementById('login-text').classList.add('hidden');
                "
                hx-on="htmx:afterRequest:
                    document.getElementById('loading-indicator').classList.add('hidden'); 
                    document.getElementById('login-text').classList.remove('hidden');
                "
            >
                {% csrf_token %}

                {% for field in form %}
                    <div>
                        <label for="{{ field.name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                        <span class="block text-red-700 dark:text-red-800 mt-2 text-sm">{{ field.errors }}</span>
                        {% endif %}
                    </div>
                {% endfor %}
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input id="remember" aria-describedby="remember" name="remember" type="checkbox" class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="remember" class="font-medium text-gray-900 dark:text-white">I accept the <a href="#" class="text-primary-700 hover:underline dark:text-primary-500">Terms and Conditions</a></label>
                    </div>
                </div>
                <button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                    <span id="loading-indicator" class="htmx-indicator hidden">Loading...</span>
                    <span id="login-text">Create account</span>
                </button>
                <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
                    <button 
                        hx-get="{% url 'signin' %}" 
                        hx-target="#main-container" 
                        hx-swap="innerHTML"
                        class="text-primary-700 hover:underline dark:text-primary-500"
                    >
                        Sign IN
                    </button>
                    &nbsp; &bull; &nbsp; 
                    <a href="https://app-generator.dev/docs/products/django/rocket-htmx/index.html"
                       class="text-primary-700 hover:underline dark:text-primary-500">Documentation</a>                    
                </div>
            </form>
        </div>
    </div>

{% endblock content %}